<template lang="pug">
    div(class="jb-ucenter-header")
        el-row
            el-col(:span="24")
                div(class="jb-ucenter-header_baseinfo")
                    div(class="jb-ucenter-header_baseinfo_avatar", v-if="avatar")
                        el-image(:src="avatar", style="border-radius: 132px; overflow:hidden;")
                    svg(class="icon jb-ucenter-header_baseinfo_avatar", aria-hidden="true", v-else)
                        use(xlink:href="#icon-morentouxiang")
                div(class="jb-ucenter-header_baseinfo")
                    span {{nickname}}

        el-row(class="jb-ucenter-header_datainfo")
            el-col(:span="8")
                div(class="align-c", @click.stop="goto('my-post')") {{summary.postCount}}
                div(class="align-c", @click.stop="goto('my-post')") 帖子
            el-col(:span="8")
                div(class="align-c", @click.stop="goto('following')") {{summary.followingCount}}
                div(class="align-c", @click.stop="goto('following')") 我关注
            el-col(:span="8")
                div(class="align-c", @click.stop="goto('follower')") {{summary.followerCount}}
                div(class="align-c", @click.stop="goto('follower')") 关注我
</template>

<script>
    import BaseVue from "@/mixins/BaseVue.js"
    import util from '@/libs/util';
    import axios from '@/plugins/axios'

    export default {
        name: 'user-header',
        mixins: [BaseVue],
        data(){
            return {
                summary: {
                    postCount: '-',
                    followingCount: '-',
                    followerCount: '-'
                }
            }
        },
        computed: {
            avatar() {
                return util.cookies.get('avatar');
            },
            nickname() {
                return util.cookies.get('nickname');
            }
        },
        methods: {
            getSummary(){
                const options = {data:{},url:'forum/summary/index'}
                axios(options).then(this.getSummarySuccess).catch(()=>{})
            },
            getSummarySuccess(summary){
                this.summary = summary;
            }
        },
        created(){
            this.getSummary();
        }
    }
</script>

<style lang="less" scoped>
    @import url('../../common/common.less');

    .jb-ucenter-header {
        background-color: white;
        padding: 6px 10px;

        &:root {
            font-size: 1rem;
        }

        // 居中对齐
        .align-c {
            text-align: center;
        }

        &_baseinfo {
            text-align: center;

            &_avatar {
                @avatar_width: 132px;
                width: @avatar_width;
                height: @avatar_width;
                margin: auto;
            }
        }

        &_datainfo {
            border-top: 1px solid @segmentation_color;
            margin-top: 20px;
            padding: 10px 0;
            font-size: 0.8em;
        }
    }
</style>
